<template>
  <div id="myTab">
    <!-- <div class="flex"> -->
      <div v-for="(item, idx) in tabArr" @click="tabHandle(idx)" :key="item.id" :class="{'active': index === idx}"  class="tab-item">
        <span class="red-dot" v-if="idx===2&&isRed"></span>
        {{ item }}
      </div>
      <!-- <div class="tab-item"  @click="tabHandle(1)" :class="{'active' : index == 1}">提货中心</div>
      <div class="tab-item" @click="tabHandle(2)" :class="{'active' : index == 2}">订单跟踪</div>
      <div class="tab-item" @click="tabHandle(3)" :class="{'active' : index == 3}">个人中心</div> -->
    <!-- </div> -->
  </div>
</template>

<script>
// import { ref } from 'vue';
// import { useRouter } from 'vue-router';
// import { reminMsg } from '@/services/index.js'
import { mapState, mapActions } from 'vuex'

export default {
  name: 'myTab',
  props: {
    index: {
      type: Number,
    }
  },
  data(){
    return {
      tabArr: ['提货中心', '订单跟踪', '个人中心']
    }
  },
  computed: {
    ...mapState({
      isRed: state => state.redDot.isRed
    })
  },
  created(){
    this.getRed()
    console.log(this.isRed)
  },
  activated(){
    this.getRed()
    console.log(this.isRed)
  },
  methods:{
    ...mapActions([
      'getRed'
    ]),
    tabHandle(idx){
      let router = this.$router;
      if(idx === this.index) {
        return
      }
      switch (idx){
        case 0:
          router.push({ name: 'Index' })
          break;
        case 1:
          router.push({ name: 'orderTrack' })
          break;
        case 2: 
          router.push({ name: 'personCenter' })
          break;
        default: 
          break;
      }
    }
  },
}
</script>

<style lang="scss" scoped>
  #myTab{
    position: fixed;
    bottom: 0;
    z-index: 999;
    left:0;
    width: 100%;
    flex-wrap: nowrap;
    display: flex;
    
    .tab-item{
      flex: 1;
      background: #F1F1F1;
      color: #333;
      height: 4.6rem;
      font-size: 14px;
      line-height: 4.6rem;
      text-align: center;
      position: relative;
      .red-dot{
        position: absolute;
        right: 5.667vw;
        top: 5vw;
        width: 1.3vw;
        height: 1.3vw;
        border-radius: 50%;
        background: #f00;
      }
      &:nth-of-type(2){
        border-left: 1px solid #fff;
        border-right: 1px solid #fff;
      }
      &.active{
        background: #403539;
        color: #fff;
      }
    }
  }
</style>